<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"

      xmlns:ui="http://java.sun.com/jsf/facelets"
      xmlns:p="http://primefaces.org/ui"


      xmlns:c="http://java.sun.com/jsp/jstl/core">
    <h:head>
        <title>Facelet Title</title>
        <style type="text/css">
            tbody{

            }
        </style>
    </h:head>
    <h:body>
        <ui:composition template="../Master/adminMaster.xhtml">
            <ui:define name="page-content">
                <section class="grid_12" id="dashtabs">

                    <div id="dashtabs-pages" class="box-content no-padding">
                        <h:form>
                            <div style="padding-left: 300px;margin: 8px;border: none">
                                <p:pieChart id="custom" value="#{summaryReportBean.pieModel}"  fill="true" showDataLabels="true"  
                                            title="Summary Pie Chart" style="width:500px;height:300px;border: none" legendPosition="ne"  />  

                            </div>
                            <div style="padding: 6px;margin-bottom: 13px">
                                <span style="font-size: 14px;color: #333333">Generate the reports by</span>  
                                <select id="dates" style="width: 150px" class="select">
                                    <option id="dailySe">Daily</option>
                                    <option id="rangeSe">In Range</option>
                                </select>
                            </div>
                            <div style="padding: 6px;margin-bottom: 13px" id="daily">
                                <span style="margin-right: 15px;font-weight: bold;font-size: 13px">Daily</span>&nbsp;<p:calendar value="#{summaryReportBean.daily}" showButtonPanel="true" navigator="true" />&nbsp;&nbsp;&nbsp;&nbsp;<p:commandButton actionListener="#{summaryReportBean.summaryReportByDaily()}" value="Generate Report" styleClass="button grey" update="summaryReports"></p:commandButton>
                            </div>
                            <div style="padding: 6px;margin-bottom: 13px" id ="range">
                                <span style="margin-right: 15px;font-weight: bold;font-size: 13px">From</span><p:calendar value="#{summaryReportBean.fromWeekly}" showButtonPanel="true" navigator="true" />&nbsp;&nbsp;&nbsp;&nbsp; <span style="margin-right: 15px;font-weight: bold;font-size: 13px">To</span><p:calendar value="#{summaryReportBean.toWeekly}"  showButtonPanel="true" navigator="true"/>&nbsp;&nbsp;&nbsp;&nbsp;<p:commandButton actionListener="#{summaryReportBean.summaryReportByWeekly()}" update="summaryReports" value="Generate Report" styleClass="button grey"></p:commandButton>
                            </div>
                            <div class="box-header">
                                Summary Report by #{summaryReportBean.flag}
                                <ul class="controls"></ul>
                            </div>
                            <p:dataTable var="temp" value="#{summaryReportBean.summaryReport}"  paginator="true" rows="10"  
                                         emptyMessage="No complaints found with given criteria" filteredValue="#{summaryReportBean.filteredReport}" id="summaryReports">  

                                <p:column headerText="Department" sortBy="#{temp.department.departmentName}" filterBy="#{temp.department.departmentName}"  filterMatchMode="contains">  
                                    #{temp.department.departmentName}  
                                </p:column>  
                                <p:column headerText="Total Complaints" sortBy="#{temp.totalComplaint}" filterBy="#{temp.totalComplaint}"  filterMatchMode="contains">  
                                    #{temp.totalComplaint}
                                </p:column> 
                                <p:column headerText="Total Waits" sortBy="#{temp.totalWait}" filterBy="#{temp.totalWait}"  filterMatchMode="contains">  
                                    #{temp.totalWait}
                                </p:column> 
                                <p:column headerText="Total Dones" sortBy="#{temp.totalDone}" filterBy="#{temp.totalDone}"  filterMatchMode="contains">  
                                    #{temp.totalDone}
                                </p:column> 

                            </p:dataTable> 
                        </h:form>
                    </div>
                </section>
                <br class="cl" />
            </ui:define>
        </ui:composition>

    </h:body>
</html>

